<template>
	<view class="">
		<view class="page5box hdpagein" :style="'display:'+(showmain ? 'block' : 'none')+';'">
			<!--个人信息-->
			<view class="page5box-myinfo bj_between mb40">
				<view class="bj_left">
					<image src="/static/page5/tx.png" class="page5box-myinfo-mypic"></image>
					<view style="padding-bottom: 10rpx;">
						<view class="bj_between mb10">
							<text>{{user.user.nickname}}</text>
							<image src="/static/page5/v1.png" class="page5box-myinfo-lvpic" mode=""></image>
						</view>
						<view class="bj_between">
							<text>ID：{{user.userId}}</text>
							<image src="/static/page5/fz.png" class="page5box-myinfo-fz" mode=""></image>
						</view>
					</view>
				</view>
				<view style="padding-top: 30rpx;">
					<view class="ca2 mb20">
						{{$t("page5.tit1")}}
					</view>
					<view class="page5box-myinfo-sbtn">
						<text>{{$t("menu.$")}}</text>
						<text class="cy">{{user.user.money}}</text>
					</view>
				</view>
			</view>

			<!--2个按钮-->
			<view class="page5box-chbox">
				<view class="page5box-chbox-l bj_center" @click="chs(1)">
					{{$t("page3.ch1")}}
				</view>
				<view class="page5box-chbox-r page5box-chbox-ro bj_sx" @click="chs(2)">
					{{$t("page3.ch2")}}
				</view>
			</view>

			<myinfoVue class="mb50"></myinfoVue>

			<view class="f32 fwb mb10">
				{{$t("page5.tit2")}}
			</view>
			<view class="page5box-ab mb30">
				<view class="bj_between mb30">
					<view class="page5box-ab-bs bj_sx">
						<view class="f32 cy">
							{{$t("menu.$")}} {{user.user.money}}
						</view>
						<view class="">
							{{$t("page5.tit5")}}
						</view>
					</view>
					<view class="page5box-ab-bs bj_sx">
						<view class="f32 cy">
							{{$t("menu.$")}} {{user.user.bonus_money}}
						</view>
						<view class="">
							{{$t("page5.tit6")}}
						</view>
					</view>
				</view>
				<view class="page5box-ab-bb bj_between f24">

					<view class="ca2 w70 bj_left">
						<view style="margin-right: 10rpx;width: 80%;">{{$t("page5.tit7")}}</view>
						<view class="cy outdata">{{user.user.inviteUrl}}</view>
					</view>
					<view class="c1f">
						{{$t("page5.btn1")}}
					</view>
				</view>
			</view>

			<view class="f32 fwb mb30">
				{{$t("page5.tit3")}}
			</view>
			<view class="page5box-item bj_left mb10" @click="opm(3)">
				<image src="/static/page5/i1.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m1")}}</text>
			</view>
			<view class="page5box-item bj_left mb10" @click="opm(2)">
				<image src="/static/page5/i2.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m2")}}</text>
			</view>
			<view class="page5box-item bj_left mb10" @click="opm(1)">
				<image src="/static/page5/i3.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m3")}}</text>
			</view>
			<view class="page5box-item bj_left mb30" @click="opm(4)">
				<image src="/static/page5/i4.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m4")}}</text>
			</view>

			<view class="f32 fwb mb30">
				{{$t("page5.tit4")}}
			</view>
			<view class="page5box-item bj_left mb10" @click="opm(5)">
				<image src="/static/page5/i5.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m5")}}</text>
			</view>
			<view class="page5box-item bj_left mb10">
				<image src="/static/page5/i6.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m6")}}</text>
			</view>
			<view class="page5box-item bj_left" @click="out">
				<image src="/static/page5/i7.png" class="page5box-item-ico"></image>
				<text>{{$t("page5.m7")}}</text>
			</view>
		</view>

		<view>
			<!--活动-->
			<component :is="pageurl" :tag="tag" ref="component" :topsty="topsty" style="padding-top: 0;" />
		</view>

		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onHide
	} from "@dcloudio/uni-app"
	import {
		ref,
		provide
	} from "vue";
	import useI18n from '@/store/useI18n.js'
	import vipVue from "../hd/vip.vue";
	import zhVue from "../zh/zh.vue";
	import myinfoVue from "../zh/myinfo.vue";
	import fxpageV from "../hd/fxpage.vue";
	const {
		t
	} = useI18n()
	let showmain = ref(true)
	import common from '../../js/common';
	let component = ref(null)
	let pageurl = ref(null)
	let tag = ref(0)
	let user = ref({})
	let loading = ref(false)
	let children_count = ref("--")
	let topsty = ref({
		"padding-top": 0
	})
	provide("clhd", clhd);

	onShow(function() {
		updateTabBarTexts()
		// 获取页面栈的实例数组
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取当前页面路径
		const currentRoute = "/" + currentPage.route;
		getApp().globalData.taburl = currentRoute

		pageurl.value = null
		showmain.value = true
		if (getApp().globalData.userInfo == null) {
			getApp().globalData.dl = true
			uni.switchTab({
				url: "/pages/index/index"
			})
			return
		}
		winit();
	})
	
	function winit(){
		loading.value = true
		common.getMinLoginUser({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			getApp().globalData.userInfo.user = res.data.user
			user.value = getApp().globalData.userInfo
			loading.value = false
		})
	}
	// 初始化菜单名称
	const updateTabBarTexts = () => {

		const tabMap = {
			0: 'menu1',
			1: 'menu2',
			2: 'menu3',
			3: 'menu4',
			4: 'menu5'
		}
		Object.entries(tabMap).forEach(([index, key]) => {
			uni.setTabBarItem({
				index: parseInt(index),
				text: t(key)
			})
		})
	}

	function chs(v) {
		uni.navigateTo({
			url: "/pages/index/tx?v=" + v
		})
	}

	function opm(v) {
		if (v == 1) {
			showmain.value = false
			pageurl.value = vipVue
		} else if (v == 2) {
			showmain.value = false
			tag.value = 0;
			pageurl.value = zhVue
		} else if (v == 3) {
			showmain.value = false
			tag.value = 1;
			pageurl.value = zhVue
		} else if (v == 4) {
			showmain.value = false
			pageurl.value = fxpageV
		} else if (v == 5) {
			showmain.value = false
			tag.value = 2;
			pageurl.value = zhVue
		}
	}

	// 关闭活动
	function clhd() {
		showmain.value = true
		setTimeout(function() {
			pageurl.value = null
		}, 300)
	}

	// 登出
	function out() {
		getApp().globalData.userInfo = null
		localStorage.removeItem("userInfo")
		uni.switchTab({
			url: "/pages/index/index"
		})
	}
</script>

<style scoped lang="scss">
	.page5box {
		background: #003311;
		padding: 30rpx 20rpx 280rpx;

		&-item {
			height: 96rpx;
			border-radius: 12rpx;
			background: url("/static/lm/next.png") #00561D no-repeat calc(100% - 26rpx) center;
			background-size: 28rpx 28rpx;
			padding-left: 26rpx;
			font-size: 32rpx;

			&-ico {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		&-ab {
			height: 344rpx;
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 20rpx;
			padding: 24rpx 20rpx;

			&-bs {
				width: 324rpx;
				height: 96rpx;
				background: #00561D;
				border-radius: 12rpx;
			}

			&-bb {
				height: 80rpx;
				background: #00561D;
				border-radius: 12rpx;
				padding: 0 20rpx;
			}

			&-sico {
				width: 56rpx;
				height: 56rpx;
				margin-left: 20rpx;
			}
		}



		&-chbox {
			position: relative;
			height: 92rpx;
			margin-bottom: 30rpx;
			font-size: 36rpx;

			&-l {
				position: absolute;
				left: 0;
				top: 0;
				width: 372rpx;
				height: 92rpx;
				color: #A2B5D5;
				background: url("/static/s1.png") no-repeat center center;
				background-size: 100% 100%;
				font-weight: bold;
			}

			&-lo {
				color: #fff;
				background: url("/static/s1o.png") no-repeat center center;
				background-size: 100% 100%;
			}

			&-r {
				position: absolute;
				top: 0;
				right: 0;
				width: 372rpx;
				height: 92rpx;
				background: url("/static/s2.png") no-repeat center center;
				background-size: 100% 100%;
				color: #A2B5D5;
				font-weight: bold;
			}

			&-ro {
				color: #fff;
				background: url("/static/s2o.png") no-repeat center center;
				background-size: 100% 100%;
			}
		}

		&-myinfo {
			font-size: 26rpx;

			&-mypic {
				width: 148rpx;
				height: 148rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			&-lvpic {
				width: 80rpx;
				height: 80rpx;
			}

			&-fz {
				width: 32rpx;
				height: 32rpx;
			}

			&-sbtn {
				min-width: 144rpx;
				max-width: 300rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #00561D;
				border-radius: 100rpx;
				border: 2rpx solid #2B436D;
			}
		}
	}
</style>